<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PowerOne 自动化测试工具 - 原型导航</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1D2129',
                        darker: '#0F172A',
                        'dark-card': '#272E3B',
                        'dark-hover': '#374151',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .nav-btn-active {
                @apply bg-primary text-white;
            }
            .nav-btn-inactive {
                @apply bg-dark-card text-gray-300 hover:bg-dark-hover transition-colors;
            }
        }
    </style>
</head>
<body class="bg-darker text-gray-200 font-inter min-h-screen flex flex-col">
    <!-- Header -->
    <header class="bg-dark border-b border-gray-700 py-4 px-6 flex items-center justify-between">
        <div class="flex items-center">
            <div class="w-10 h-10 rounded-md bg-primary flex items-center justify-center mr-3">
                <i class="fa fa-cogs text-white text-xl"></i>
            </div>
            <h1 class="text-2xl font-bold text-white">PowerOne 自动化测试工具</h1>
        </div>
        <div class="flex items-center space-x-4">
            <button class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg text-sm font-medium transition-colors flex items-center">
                <i class="fa fa-save mr-2"></i> 保存
            </button>
            <div class="flex items-center">
                <img src="https://images.pexels.com/photos/1805164/pexels-photo-1805164.jpeg?auto=format&fit=crop&w=100&q=80" alt="User Avatar" class="w-9 h-9 rounded-full object-cover border-2 border-primary">
            </div>
        </div>
    </header>

    <!-- Navigation -->
    <nav class="bg-dark-card border-b border-gray-700 px-6 py-3">
        <div class="flex space-x-3">
            <button id="nav-dashboard" class="nav-btn-active px-5 py-2 rounded-lg text-sm font-medium flex items-center transition-all duration-200">
                <i class="fa fa-tachometer mr-2"></i> 控制台
            </button>
            
            <a href="project-management.html" class="nav-btn-inactive px-5 py-2 rounded-lg text-sm font-medium flex items-center transition-all duration-200">
                <i class="fa fa-folder-open mr-2"></i> 项目管理
            </a>
            <button id="nav-test-case" class="nav-btn-inactive px-5 py-2 rounded-lg text-sm font-medium flex items-center transition-all duration-200">
                <i class="fa fa-list-alt mr-2"></i> 测试用例
            </button>
            <button id="nav-execution" class="nav-btn-inactive px-5 py-2 rounded-lg text-sm font-medium flex items-center transition-all duration-200">
                <i class="fa fa-play-circle mr-2"></i> 测试执行
            </button>
       
            <a href="execution-results.html" class="nav-btn-inactive px-5 py-2 rounded-lg text-sm font-medium flex items-center transition-all duration-200">
                <i class="fa fa-chart-bar mr-2"></i> 测试报告
            </a>
            <a href="defect-management.html" class="nav-btn-inactive px-5 py-2 rounded-lg text-sm font-medium flex items-center transition-all duration-200">
                <i class="fa fa-bug mr-2"></i> 缺陷管理
            </a>
        </div>
    </nav>

    <!-- Main Content Area -->
    <main id="content-area" class="flex-1 p-6">
        <!-- Content will be loaded here dynamically -->
        <div class="flex items-center justify-center h-full">
            <div class="text-center">
                <div class="w-20 h-20 mx-auto mb-4 text-gray-500">
                    <i class="fa fa-spinner fa-spin text-4xl"></i>
                </div>
                <p class="text-gray-400">加载中，请稍候...</p>
            </div>
        </div>
    </main>

    <script>
        // Page navigation functionality
        document.addEventListener('DOMContentLoaded', function() {
            // Navigation buttons
            const navButtons = {
                dashboard: document.getElementById('nav-dashboard'),
                testCase: document.getElementById('nav-test-case'),
                execution: document.getElementById('nav-execution')
            };
            const contentArea = document.getElementById('content-area');
            const pages = {
                dashboard: 'dashboard.html',
                testCase: 'test-case-editor.html',
                execution: 'execution-results.html'
            };

            // Set active button style
            function setActiveButton(activeButton) {
                // Reset all buttons
                Object.values(navButtons).forEach(btn => {
                    btn.classList.remove('nav-btn-active');
                    btn.classList.add('nav-btn-inactive');
                });
                // Set active button
                activeButton.classList.remove('nav-btn-inactive');
                activeButton.classList.add('nav-btn-active');
            }

            // Load page content
            function loadPage(pageUrl) {
                // Show loading indicator
                contentArea.innerHTML = `
                    <div class="flex items-center justify-center h-full">
                        <div class="text-center">
                            <div class="w-20 h-20 mx-auto mb-4 text-gray-500">
                                <i class="fa fa-spinner fa-spin text-4xl"></i>
                            </div>
                            <p class="text-gray-400">加载中，请稍候...</p>
                        </div>
                    </div>
                `;

                // Fetch and load the page
                fetch(pageUrl)
                    .then(response => {
                        if (!response.ok) throw new Error('页面加载失败');
                        return response.text();
                    })
                    .then(html => {
                        contentArea.innerHTML = html;
                        // Execute any scripts in the loaded content
                        executeScripts(contentArea);
                    })
                    .catch(error => {
                        contentArea.innerHTML = `
                            <div class="bg-danger/10 border border-danger/30 rounded-lg p-6 text-center">
                                <div class="text-danger mb-2"><i class="fa fa-exclamation-circle text-2xl"></i></div>
                                <h3 class="text-white text-lg font-medium mb-1">加载失败</h3>
                                <p class="text-gray-400 text-sm">无法加载页面: ${error.message}</p>
                                <button onclick="window.location.reload()" class="mt-4 px-4 py-2 bg-dark-card hover:bg-dark-hover text-sm rounded-lg transition-colors">
                                    <i class="fa fa-refresh mr-1"></i> 重试
                                </button>
                            </div>
                        `;
                        console.error('Page load error:', error);
                    });
            }

            // Execute scripts in loaded content
            function executeScripts(container) {
                const scripts = container.querySelectorAll('script');
                scripts.forEach(oldScript => {
                    const newScript = document.createElement('script');
                    // Copy attributes
                    Array.from(oldScript.attributes).forEach(attr => {
                        newScript.setAttribute(attr.name, attr.value);
                    });
                    // Copy content
                    newScript.textContent = oldScript.textContent;
                    // Replace old script with new one
                    oldScript.parentNode.replaceChild(newScript, oldScript);
                });
            }

            // Navigation event listeners
            navButtons.dashboard.addEventListener('click', function() {
                setActiveButton(this);
                loadPage(pages.dashboard);
            });

            navButtons.testCase.addEventListener('click', function() {
                setActiveButton(this);
                loadPage(pages.testCase);
            });

            navButtons.execution.addEventListener('click', function() {
                setActiveButton(this);
                loadPage(pages.execution);
            });

            // Load default page
            loadPage(pages.dashboard);
        });
    </script>
</body>
</html>